<a href="#" id="menuLink" class="nav-menu-button">目录导航</a>

<div class="nav-inner">
    <p class="logo mc">
        <b>XXFORM</b>
    </p>
    <p style="color: aliceblue;">
        <small>欢迎: </small>
        <b th:text="${session.name}" th:if="${session.name!=''}"></b>
        <b th:if="${session.name==''}">匿名用户</b>
    </p>
    <p>
        <button class="pure-button btn-default" id="logout">安全退出</button>
    </p>
    <div class="pure-menu">
        <ul class="pure-menu-list">
            <li class="pure-menu-heading">目录</li>
            <li class="pure-menu-item"><a href="/home/paper.html" th:class="${navIndex=='paper'?'pure-menu-link active':'pure-menu-link'}"><img src="/images/m-bkm.png" /> 问卷管理</a></li>
            <li class="pure-menu-item"><a href="/home/answer.html" th:class="${navIndex=='answer'?'pure-menu-link active':'pure-menu-link'}"><img src="/images/m-edit.png" /> 答卷列表</a></li>
            <!--
            <li class="pure-menu-heading">设置</li>
            <li class="pure-menu-item"><a href="/setting.html" th:class="${navIndex=='paper'?'pure-menu-link active':'pure-menu-link'}"><img src="/images/m-user.png" /> 账号管理</a></li>-->
        </ul>
    </div>
    <div class="nav-info">
        <p>&copy; 蓝欣科技<br> <small>version: 1.0.2 beta</small></p>
    </div>
</div>
<script>
document.getElementById("logout").onclick = function () {
    if (confirm('确定退出吗？')) {
        lets.post('/user/logout.do').then(res => {
            if (res.code == 1) {
                location.href = '/';
            }
        });
    }
}
function getElements() {
    return {
        menu: document.getElementById('nav'),
        menuLink: document.getElementById('menuLink')
    };
}
function toggleClass(element, className) {
    var classes = element.className.split(/\s+/);
    var length = classes.length;
    var i = 0;

    for (; i < length; i++) {
        if (classes[i] === className) {
            classes.splice(i, 1);
            break;
        }
    }
    // The className is not found
    if (length === classes.length) {
        classes.push(className);
    }

    element.className = classes.join(' ');
}
function toggleMenu() {
    var active = 'active';
    var elements = getElements();

    toggleClass(elements.menu, active);
}
function handleEvent(e) {
    var elements = getElements();

    if (e.target.id === elements.menuLink.id) {
        toggleMenu();
        e.preventDefault();
    } else if (elements.menu.className.indexOf('active') !== -1) {
        toggleMenu();
    }
}
document.addEventListener('DOMContentLoaded', function () {
    document.addEventListener('click', handleEvent);
});
</script>